<template>
  <div class="collect-page">
    <div class="header">
      <h1>
        <span class="iconfont icon-shoucang"></span>
        我的收藏
      </h1>
      <p class="subtitle">收藏您重要的笔记，方便快速访问</p>
    </div>

    <div class="content">
      <div v-if="starredNotes.length === 0" class="empty-state">
        <div class="empty-icon">⭐</div>
        <h3>暂无收藏</h3>
        <p>您还没有收藏任何笔记</p>
        <p class="hint">在笔记右侧操作组点击"收藏"将笔记添加到收藏夹</p>
      </div>

      <div v-else class="notes-grid">
        <div 
          v-for="note in starredNotes" 
          :key="note.id" 
          class="note-card"
          @click="openNote(note)"
        >
          <div class="note-header">
            <h3 class="note-title">{{ note.title }}</h3>
            <span class="iconfont icon-star star-icon"></span>
          </div>
          <div class="note-preview" v-html="getPreview(note.content)"></div>
          <div class="note-meta">
            <span class="update-time">更新于 {{ formatTime(note.updated) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onActivated } from "vue";
import { useRouter } from "vue-router";
import { formatTime } from "@/renderer/utils/helper";

const router = useRouter();
const starredNotes = ref<any[]>([]);

// 获取收藏笔记
const getStarredNotes = async () => {
  try {
    // 通过Express API获取数据
    const response = await fetch('http://localhost:32068/api/memorys');
    const result = await response.json();
    console.log('Memorys API Response:', result);
    
    // 从所有笔记中筛选出收藏的笔记
    if (result.data && Array.isArray(result.data)) {
      starredNotes.value = result.data.filter((note: any) => note.isStar);
    } else {
      starredNotes.value = [];
    }
  } catch (error) {
    console.error("通过API获取收藏笔记失败:", error);
    // 如果API请求失败，可以考虑使用原来的方式或者显示错误信息
    starredNotes.value = [];
  }
};

// 获取内容预览
const getPreview = (content: string) => {
  if (!content) return '暂无内容';
  
  // 移除HTML标签获取纯文本
  const text = content.replace(/<[^>]*>/g, '');
  // 截取前100个字符
  return text.length > 100 ? text.substring(0, 100) + '...' : text;
};

// 打开笔记
const openNote = (note: any) => {
  // 使用Vue Router进行跳转，并传递参数
  router.push({
    path: '/WindowMain/Memo',
    query: {
      from: 'collect',
      noteId: note.id
    }
  });
};

onMounted(async () => {
  await getStarredNotes();
});

onActivated(async () => { 
  await getStarredNotes();
});
</script>

<style scoped>
.collect-page {
  height: 100%;
  padding: 20px;
  overflow-y: auto;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h1 {
  font-size: 28px;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.header h1 .iconfont {
  margin-right: 10px;
  color: #fadb14;
}

.subtitle {
  color: var(--text-secondary);
  font-size: 16px;
}

.content {
  max-width: 1200px;
  margin: 0 auto;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  background-color: var(--surface-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.empty-state h3 {
  font-size: 22px;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.empty-state p {
  color: var(--text-secondary);
  font-size: 16px;
  margin-bottom: 5px;
}

.hint {
  font-size: 14px !important;
  margin-top: 20px;
  padding: 15px;
  background-color: var(--primary-extra-light-color);
  border-radius: var(--border-radius);
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.note-card {
  background-color: var(--surface-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 20px;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid var(--border-color);
}

.note-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary-color);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.note-title {
  font-size: 18px;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.star-icon {
  color: #fadb14;
  font-size: 20px;
  margin-left: 10px;
}

.note-preview {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-placeholder);
  border-top: 1px solid var(--border-color);
  padding-top: 15px;
}

.update-time {
  font-size: 12px;
}

@media (max-width: 768px) {
  .collect-page {
    padding: 15px;
  }
  
  .notes-grid {
    grid-template-columns: 1fr;
  }
  
  .header h1 {
    font-size: 24px;
  }
}
</style>